<template>
  <div :class="['cjui-loading-progress', modal !== 'full-box' && 'is-p-relative']">
    <slot></slot>

    <div
      v-show="loading"
      class="cjui-loading-progress--modal"
      :class="[modal ? 'is-modal-' + modal : '']"
    >
      <div class="modal-container">
        <div class="modal-box">
          <component :is="loadingIcon" class="cjui-loading-theme" />

          <div class="modal-font" v-if="fontshow">
            <p class="is-number">{{ statusNumber }} %</p>
            <slot name="message">
              <p v-if="message" class="is-message">{{ message }}</p>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { onUnmounted, ref, toRefs, watch } from 'vue'
import LoadingProgressLoading from './LoadingProgressLoading.vue'

export default {
  name: 'CjuiLoadingProgress',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    modal: {
      // 默认作为子元素追加在容器内最后位置 | full - 内部内容居中 | full-box - 外部容器居中 | fullscreen - 全屏居中 | fullscreen-center - 全屏居中小遮罩
      type: String,
      default: ''
    },
    action: {
      // 是否开启数字进度
      type: Boolean,
      default: false
    },
    speed: {
      // 数字进度速度
      type: Number,
      default: 30
    },
    status: {
      // 数字进度快进值
      type: Number,
      default: 0
    },
    fontshow: {
      // 是否显示载入文本
      type: Boolean,
      default: false
    },
    message: {
      // 载入文本
      type: String,
      default: ''
    },
    loadingIcon: {
      type: Object,
      default: LoadingProgressLoading
    }
  },
  emits: ['update:loading', 'closeEvent'],
  setup(props, context) {
    const { loading, status, action, speed } = toRefs(props)

    const statusNumber = ref(0)
    let timer = null
    watch(
      () => status.value,
      () => {
        statusNumber.value = status.value
      }
    )
    watch(
      () => loading.value,
      (newVal) => {
        if (newVal) {
          statusNumber.value = status.value
          if (action.value) {
            timer = setInterval(() => {
              if (statusNumber.value <= 99) {
                statusNumber.value += 1
              } else {
                clearInterval(timer)
                closeEvent()
              }
            }, speed.value)
          }
        }
      }
    )
    function closeEvent() {
      context.emit('update:loading', false)
      context.emit('closeEvent')
    }

    onUnmounted(() => {
      clearInterval(timer)
    })

    return {
      statusNumber,
      closeEvent
    }
  }
}
</script>

<style lang="scss">
// loading-progress style
// -------------------------
.cjui-loading-progress {
  .cjui-loading-theme {
    --cjui-loading-width: 100px;
    --cjui-loading-height: 100px;
  }
}
// -------------------------
.cjui-loading-progress {
  &.is-p-relative {
    position: relative;
  }

  .modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .modal-font {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--cjui-color-primary);
    text-align: center;
    font-size: 12px;
    white-space: nowrap;

    p {
      margin: 0;
    }

    .is-number {
      font-size: 14px;
      padding-left: 0.5em;
    }
    .is-message {
      padding-left: 0.2em;
    }
  }
}
.cjui-loading-progress--modal.is-modal-full {
  min-height: 120px;
  background: var(--cjui-loading-modal-color);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.cjui-loading-progress--modal.is-modal-full-box {
  min-height: 120px;
  background: var(--cjui-loading-modal-color);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.cjui-loading-progress--modal.is-modal-fullscreen {
  background: var(--cjui-loading-modal-color);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;
}
.cjui-loading-progress--modal.is-modal-fullscreen-center {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3000;

  .modal-box {
    position: relative;
    background: var(--cjui-loading-modal-color);
    padding: 15px;
    border-radius: 4px;
  }
}
</style>
